<template>
  <el-dialog
      custom-class="subDialog"
      :title="title"
      draggable
      v-model="dialogPopVisible"
      :width="width"
      :close-on-click-modal="false"
      v-bind="option"
  >
    <template #header>
      <component
          v-if="titleBar&&titleBar.comps"
          :is="titleBar.comps"
          :params="params"
          :title="title"
          :rootContext="parentContext"
          :modalContext="modalContext"
          class="dialog_default_header"></component>

      <div class="dialog_default_header" v-else>{{ title }}</div>
    </template>
    <div class="inner" :style="{height:height}">
      <div class="outer">
        <component
            :is="comps"
            :params="params"
            ref="ModalComp"
            :readOnly="readOnly"
        ></component>
      </div>
    </div>
    <template #footer v-if="!readOnly">
      <div class="dialog_default_footer">
        <el-button v-for="item in footButtons" :type="item.type" @click="footButtonsClick(item.clickType)">{{
            item.name
          }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
// @ts-ignore
import {ref} from 'vue'

//定义组件名称
defineOptions({
  name: "Dialog"
});
const props = defineProps({
  title: {type: String, required: true},
  width: {type: String, required: false, default: '650px'},
  height: {type: String, required: false, default: '400px'},
  option: {type: Object, default: {}},
  params: {type: Object, default: {}},
  readOnly: {type: Boolean},
  remove: {
    type: Function, default: undefined
  },
  parentContext: {
    type: Object, default: undefined
  },
  //头部的header栏, 接收 comps:'组件id',titleBtnClick:function(type,params,modelContext)
  titleBar: {
    type: Object, default: undefined
  },
  comps: {
    type: String, required: true
  },
  footButtons: {
    type: Array, required: false, default: [
      {
        type: 'danger',
        name: '重置',
        clickType: 'reset'
      },
      {
        type: 'primary',
        name: '提交',
        clickType: 'submit'
      }
    ]
  }
});
// 显示属性
const dialogPopVisible = ref<boolean>(false);
//组件
const ModalComp = ref<any>(null);
const modalContext = ref<any>({
  closeModal: function () {
    dialogPopVisible.value = false;
    if (props.remove) {
      props.remove();
    }
  }
});
const parentToolBarClick = (type: any) => {
  console.log("调用toolbarclick", props.titleBar);
  props.titleBar?.titleBtnClick(type, props.params, modalContext.value);
}
const footButtonsClick = (btnType: string) => {
  ModalComp.value.clickEvent(btnType, props.params, props.parentContext, modalContext.value);
}
defineExpose({
  footButtonsClick,
  modalContext,
  parentToolBarClick
});
</script>